<template>
  <TresCanvas>
    <TresMesh :geometry="geometry">
      <TresShaderMaterial :vertexShader="vertexShader" :fragmentShader="fragmentShader" :uniforms="uniforms" />
    </TresMesh>
  </TresCanvas>
</template>

<script lang="ts">
import { PropType, defineComponent, ref, watch } from 'vue';
import { BufferGeometry, Float32BufferAttribute, Vector2, Vector3 } from 'three';
import vertexShader from './vertexShader.glsl';
import fragmentShader from './fragmentShader.glsl';

export default defineComponent({
  name: 'RectangleShader',
  props: {
    points: {
      type: Array as PropType<any[]>,
      required: true,
    },
    colors: {
      type: Array as PropType<any[]>,
      required: true,
    },
  },
  setup(props) {
    const geometry = ref(new BufferGeometry());
    const uniforms = {
      // ...其他uniforms...
      uTime: { value: 0 },
      uAmplitude: { value: new Vector2(0.1, 0.1) },
      uFrequency: { value: new Vector2(20, 5) },
      uColor: { value: new Vector3(1.0, 1.0, 1.0) }, // 初始颜色为白色
    };
    const updateGeometry = () => {
      const vertices = new Float32Array(props.points.flat());
      geometry.value.setAttribute('position', new Float32BufferAttribute(vertices, 3));
      geometry.value.computeVertexNormals();
    };

    watch(() => props.points, updateGeometry, { immediate: true });

    return {
      geometry,
      vertexShader,
      fragmentShader,
      uniforms
    };
  }
});
</script>

<style scoped>
/* 添加样式 */
</style>
